<template>
  <div class="layout-container">
    <main>
      <RouterView/>
    </main>
    <footer>
      <Footer/>
    </footer>
  </div>
</template>

<script>
import Footer from '@/components/Footer.vue'
import Header from '@/components/Header.vue'

export default {
  name: 'Layout',
  components: { Header, Footer }
}
</script>

<style scoped>
.layout-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

header, footer {
  flex: 0 0 auto;
}

main {
  flex: 1 1 auto;
  overflow-y: auto;
}
</style>